<%@ page language="java" contentType="text/html"  pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="${CSS}bootstrap.min.css"/>
	<link rel="stylesheet" href="${CSS}font-awesome.css"/>	
	<link rel="stylesheet" href="${CSS}b.page.bootstrap3.css" type="text/css">
	<link rel="stylesheet" href="${CSS}form.css">
	<link rel="stylesheet" href="${CSS}tabs.css">
	<script src="${JS}jquery-3.2.1.min.js" type="text/javascript"></script>
	<script src="${JS}../../layer/layer.js"></script>
	<script src="${JS}bootstrap.min.js"></script>
	<script src="${JS}b.page.js" type="text/javascript"></script>
	<script src="${JS}form.js"></script>
</head>
<body>
<div class="container-fluid">
	<div class="row">
		<div class="col-xs-12" style="padding-top:12px;">
			<div class="tabbable" id="myTab">
				<ul class="nav nav-tabs">
					<li class="active">
						<a data-toggle="tab" href="#home">
							<i class="fa fa-cog"></i> 短信配置
						</a>
					</li>
					<li>
						<a data-toggle="tab" href="#profile">
							<i class="fa fa-clone"></i> 短信模板
						</a>
					</li>
					<li>
						<a data-toggle="tab" href="#dropdown">
							<i class="fa fa-comments-o"></i> 群发短信
						</a>
					</li>
				</ul>
				<div class="tab-content">
					<div id="home" class="tab-pane in active column">
						<div style="padding-left:20%;"><a href="https://user.ihuyi.com/login.html" target="_blank">点击这里进入短信管理</a></div>
						<hr/>
						<form class="form-horizontal" name="myform" method="ajax" action="saveMessage">
							<div class="form-body">
								<div class="form-group">
									<label class="col-sm-2 control-label">
										用户名：
									</label>
									<div class="col-sm-10">
										<input class="form-control" name="username" type="text" attribute="unempty" value="${username}">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label">
										密码：
									</label>
									<div class="col-sm-10">
										<input class="form-control" name="password" type="text" attribute="unempty" value="${password}">
									</div>
								</div>
							</div>
							<div class="form-footer">
								<div class="form-group">
									<label class="col-sm-2">
									</label>
									<div class="col-sm-10">
										<button type="button" id="save" class="btn btn-sm btn-grey">
											<i class="fa fa-check">
											</i>
											提交
										</button>
										<button type="reset" id="reset" class="btn btn-sm btn-grey">
											<i class="fa fa-undo">
											</i>
											重置
										</button>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div id="profile" class="tab-pane column">
						<table class="bTable table table-striped table-bordered table-hover table-condensed">
							<thead>
								<tr>
									<th width="70px">模板ID</th>
									<th>标题</th>
									<th>内容</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
							<c:forEach items="${list}" var="val">
								<tr>
								    <td>${val.mid}</td>
									<td>${val.title}</td>
									<td>${val.value}</td>							
									<td>
										<c:if test="${val.mid>6}">
										<a href="javascript:deleteTemp(${val.mid});" class="btn btn-primary btn-xs"><i class="fa fa-remove"></i> 删除</a>
										</c:if>
									</td>							
								</tr>
							 </c:forEach>							
							</tbody>
						</table>
						<form class="form-horizontal" name="addTemp" method="ajax" action="addTemp">
							<div class="form-body">
								<div class="form-group">
									<label class="col-sm-2 control-label">
										模板标题：
									</label>
									<div class="col-sm-10">
										<input class="form-control" name="title" type="text" attribute="unempty">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label">
										模板内容：
									</label>
									<div class="col-sm-10">
										<textarea class="form-control" name="value"></textarea>
									</div>
								</div>
							</div>
							<div class="form-footer">
								<div class="form-group">
									<label class="col-sm-2">
									</label>
									<div class="col-sm-10">
										<button type="button" id="saveTemp" class="btn btn-sm btn-grey">
											<i class="fa fa-check">
											</i>
											添加模板
										</button>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div id="dropdown" class="tab-pane column">
						<form class="form-horizontal" name="sendMsg" method="ajax" action="sendmsg">
							<div class="form-body">
								<div class="form-group">
									<label class="col-sm-2 control-label">
										发送对象：
									</label>
									<div class="col-sm-10">
										<textarea class="form-control" id="user" placeholder="填写手机号码，多个号码用“英文逗号”隔开"></textarea>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label">
										选择模板：
									</label>
									<div class="col-sm-10">
										<select class="form-control" onchange="changesend(this);">
										<option value="">--请选择模板--</option>
										<c:forEach items="${list}" var="val">
											<option value="${val.value}">
												${val.title}
											</option>											
										 </c:forEach>	
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label">
										发送内容：
									</label>
									<div class="col-sm-10">
										<textarea class="form-control" id="message"></textarea>
									</div>
								</div>
							</div>
							<div class="form-footer">
								<div class="form-group">
									<label class="col-sm-2">
									</label>
									<div class="col-sm-10">
										<button type="button" id="send" class="btn btn-sm btn-grey">
											<i class="fa fa-check">
											</i>
											发送
										</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
var myform=form.init("myform");	
var addTemp=form.init("addTemp");	
var sendMsg=form.init("sendMsg");	

$("#saveTemp").click(function(){
	addTemp.submit(function(res){
		layer.msg(res.msg);
		setTimeout(function(){
			location.href=res.url;
		},1000);
	});
});

$("#send").click(function(){
	var message=$("#message").val();
	var user=$("#user").val();
	if(user==''){
		layer.msg("发送对象不能为空！");		
		return;
	}
	if(message==''){
		layer.msg("消息不能为空！");		
		return;
	}
	sendMsg.put("user",user);
	sendMsg.put("message",message);
	sendMsg.submit(function(res){
		layer.msg(res.msg);		
	});
});

$("#save").click(function(){
	myform.submit(function(res){
		layer.msg(res.msg);
	});
});
$("#reset").click(function(){
	myform.reset();
});

function deleteTemp(mid){
	$.get("deleteTemp?mid="+mid,function(res){
		layer.msg(res.msg);
		setTimeout(function(){
			location.href=res.url;
		},1000);
	},"json")
}
function changesend(e){
	var value=$(e).val();
	$("#message").val(value);
}
</script>
</body>
</html>
